body {
  height: initial;
}

.main-container {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  // padding: 0 8.125rem;
  // background: linear-gradient(to bottom, #1d87fb, #fff);

  .bgCon {
    width: 100%;
    margin-top: 1.25rem;

    &.flex {
      display: flex;
    }
  }

  .bg1 {
    width: 100%;
    height: 18.0625rem;
    background-image: url("../../public/images/bg1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .bg2 {
    width: 50%;
    height: 12.75rem;
    // background-image: url("../../public/images/bg2.png");
    // background-size: contain;
    // background-repeat: no-repeat;
  }
  .bg3 {
    width: 50%;
    height: 12.75rem;
    margin-left: 3.4375rem;
    // background-image: url("../../public/images/bg3.png");
    // background-size: contain;
    // background-repeat: no-repeat;
  }
  .title {
    color: #fff;
    font-size: 2.25rem;
  }
  .rightConten2 {
    width: 100%;
    .r1 {
      width: 50%;
      height: 100%;
    }
    .r2 {
      width: 50%;
      height: 100%;
    }
    .normalToolItem {
      margin-left: 5.4375rem;
      .item {
        width: 100%;
      }
    }

    .itemBox {
      width: 50%;
    }

    .item {
      width: 100%;
      height: 9.75rem;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-image: url("../../public/images/r2-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .icon {
        width: 5.25rem;
        height: 5.25rem;
      }
      .text {
        margin-top: 0.625rem;
        font-size: 1.5rem;
      }
    }

    .item2 {
      margin-top: 1.75rem;
    }

    .r2 {
      margin-left: 3.125rem;
    }
  }
  .rightContent3 {
    width: 100%;
    margin-top: 2.3125rem;
    margin-bottom: 3.125rem;
    .firstItem {
      width: 48%;
      height: 100%;
      margin-left: 2.5rem;
      padding: 2.0625rem 2.9375rem;
      background: #fff;
      border-radius: 1.25rem;

      &:first-of-type {
        margin-left: 0;
      }
    }

    .text {
      font-size: 2.25rem;
    }

    .bottomContent {
      margin-top: 2.0625rem;
      .item {
        width: 9.375rem;
        height: 2.5rem;
        border-radius: 0.9375rem;
        background: #f0f0f0;
        font-size: 1.5rem;

        .text {
          font-size: 2.25rem;
        }

        &.active {
          background: #2287f9;
          color: #fff;
        }

        &.none {
          opacity: 0;
        }

        .arrow-right {
          width: 2.3125rem;
          height: 1.875rem;
        }
      }

      .mt {
        margin-top: 1.25rem;
      }
    }

    .list {
      max-height: 50rem;
      overflow-y: scroll;
    }

    .lastContent {
      margin-top: 3.0625rem;
    }

    .list-item {
      .imgCon {
        width: 14.6875rem;
        height: 8.375rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        .title {
          max-width: 23.125rem;
          font-size: 1.5rem;
          color: #000;
        }
      }
      .tip {
        color: #999;
        font-size: 1.25rem;
        margin-top: 2.5rem;
      }
    }
  }
}

@media screen and (min-width: 375px) and (max-width: 1920px) {
  .main-container {
    width: 120rem;
  }
}

@media screen and (min-width: 650px) and (max-width: 1599px) {
  html {
    height: 150rem;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
  html {
    height: 162%;
  }
}
